<template>
  <fs-page>
    <template #header>
      <div class="title">
        网关黑白名单管理
        <fs-icon icon="carbon:flight-roster" :spin="true" />
      </div>
    </template>
    <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding">
      <template #actionbar-right>
        <n-alert
          type="warning"
          class="ml-1"
          title="限访名单存储在Redis中,一般黑名单也不会太多,因此前端分页"
        />
      </template>
    </fs-crud>
  </fs-page>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { useCrud, useExpose } from '@fast-crud/fast-crud';
  import createCrudOptions from './crud';
  import { GetList } from './api';

  export default defineComponent({
    name: 'BlackListForm',
    setup() {
      const crudRef = ref();
      const crudBinding = ref();
      const localDataRef = ref();

      onMounted(async () => {
        const ret = await GetList({
          page: { offset: 0, current: 1, size: 99999999 },
          query: {},
          sort: {},
        });
        localDataRef.value = ret.data;

        const { expose } = useExpose({ crudRef, crudBinding });
        const { crudOptions } = createCrudOptions({ expose, localDataRef });
        useCrud({ expose, crudOptions });

        await expose.doRefresh();
      });

      return {
        crudBinding,
        crudRef,
      };
    },
  });
</script>
